1
00:00:00,770 --> 00:00:05,510
Now that we have the server service setup, let's go ahead and start scripting the functionality for

2
00:00:05,510 --> 00:00:07,220
our starting menu GUI.

3
00:00:07,490 --> 00:00:10,670
So instead of starter GUI, we have our starting menu here.

4
00:00:10,670 --> 00:00:14,180
And let me go ahead and enable UI visibility so we can see it more clearly.

5
00:00:14,480 --> 00:00:17,720
And we have a bunch of different frames in here that we're going to have to script.

6
00:00:17,720 --> 00:00:20,600
So this is going to be our main frame right here.

7
00:00:20,600 --> 00:00:25,460
We're going to have two buttons one to go to the server frame and one to go to the about menu.

8
00:00:25,460 --> 00:00:32,270
So if I enable the visibility for our about menu it'll just show some text like what this game is about

9
00:00:32,270 --> 00:00:33,140
and what we're supposed to do.

10
00:00:33,140 --> 00:00:35,540
And it'll have a back button inside of it.

11
00:00:36,630 --> 00:00:40,800
And then for our server menu we'll go down to this one right here.

12
00:00:40,800 --> 00:00:42,780
We'll enable the visibility of this one.

13
00:00:42,780 --> 00:00:45,540
And let me disable the visibility of the main one.

14
00:00:45,540 --> 00:00:46,710
So we'll disable that.

15
00:00:47,040 --> 00:00:48,900
So this will be our server menu.

16
00:00:48,930 --> 00:00:52,650
We'll have the list of servers that currently exist in the game.

17
00:00:52,650 --> 00:00:57,630
And then when we click on a server the plan is to have this button here become bright again.

18
00:00:57,630 --> 00:00:58,920
So it's not darkened.

19
00:00:58,920 --> 00:01:00,960
And then we can join that server.

20
00:01:00,960 --> 00:01:04,650
Or we can create a server or go back to the main menu.

21
00:01:05,320 --> 00:01:10,390
So I have two other text buttons here, ones for example player and one is example server.

22
00:01:10,390 --> 00:01:13,270
We're going to use these to create a server.

23
00:01:13,270 --> 00:01:16,360
And then we're going to use these to create ones for players.

24
00:01:16,360 --> 00:01:18,880
So they're going to like represent a list of players in the game.

25
00:01:18,880 --> 00:01:19,810
So I'll give you an example.

26
00:01:19,810 --> 00:01:23,470
If I copy this and go to my server menu, there's a list in here.

27
00:01:23,470 --> 00:01:27,460
And if I paste that in there it'll let me enable the visibility.

28
00:01:27,460 --> 00:01:31,300
It'll display the name of the server and how many people are in that server.

29
00:01:31,300 --> 00:01:37,090
And of course, since this is a list with a UI list layout, we can duplicate this as many times and

30
00:01:37,090 --> 00:01:40,690
the scrolling frame will update automatically to fill in.

31
00:01:40,690 --> 00:01:46,030
You know, however, many people are, uh, having their servers in here.

32
00:01:46,840 --> 00:01:50,470
And then let's say they hit the Create server button.

33
00:01:50,470 --> 00:01:53,530
Then we'll disable the visibility of this menu.

34
00:01:53,530 --> 00:01:56,170
And then we'll open up the Create server menu.

35
00:01:56,620 --> 00:01:57,040
Here.

36
00:01:57,040 --> 00:01:58,960
It'll ask them what the server size will be.

37
00:01:58,960 --> 00:02:01,360
So we'll need to script this plus and minus button.

38
00:02:01,360 --> 00:02:05,050
We'll also have functionality for whether or not they have a password.

39
00:02:05,050 --> 00:02:11,170
So if they hit this button here it'll display um a little text box.

40
00:02:11,170 --> 00:02:16,150
So if we go to the settings frame here there is a password input.

41
00:02:16,150 --> 00:02:18,520
So it'll enable the visibility of that.

42
00:02:18,520 --> 00:02:19,750
It'll say input password.

43
00:02:19,750 --> 00:02:21,400
And we can type in our password there.

44
00:02:21,400 --> 00:02:23,530
And then we'll create the server.

45
00:02:25,030 --> 00:02:27,040
Let me go ahead and disable the visibility here.

46
00:02:27,040 --> 00:02:33,730
So once we create a server then it'll open up our in server menu owner frame.

47
00:02:33,730 --> 00:02:35,350
So we're the owner of the server.

48
00:02:35,350 --> 00:02:37,240
It'll display that this is your server.

49
00:02:37,240 --> 00:02:40,090
It'll have a list of all the other players that are in the game.

50
00:02:40,090 --> 00:02:44,440
And we'll be able to select one of those players and remove them if we'd like.

51
00:02:44,440 --> 00:02:47,500
We can delete the server or we can go ahead and start the game.

52
00:02:48,110 --> 00:02:53,390
So let me copy one of these example players, and I could go ahead and put it inside of the player list

53
00:02:53,390 --> 00:02:55,250
and let me enable the visibility on that.

54
00:02:55,250 --> 00:02:58,880
So it'll have the name of the player and then a little image of them.

55
00:02:58,880 --> 00:03:04,130
And again we can put as many as these in here depending on the size of the server.

56
00:03:04,760 --> 00:03:07,880
And then let's say, um, they hit start game.

57
00:03:07,880 --> 00:03:12,830
That means that, um, our teleport menu is going to fade in and.

58
00:03:14,220 --> 00:03:19,470
Oh, looks like the transparency is set to be completely transparent, but it'll have a black screen

59
00:03:19,470 --> 00:03:22,500
fade in and it'll just have some text there that says teleporting.

60
00:03:23,870 --> 00:03:25,160
And then some other frames in here.

61
00:03:25,190 --> 00:03:27,320
Of course we have one for the message.

62
00:03:27,320 --> 00:03:32,360
So like if any player needs a message displayed on their screen, it'll say notice the message goes

63
00:03:32,360 --> 00:03:32,630
here.

64
00:03:32,630 --> 00:03:35,270
And then they can hit okay to close out this menu.

65
00:03:36,340 --> 00:03:42,220
And of course, we have another menu here to display when you're in a server as not the owner.

66
00:03:42,220 --> 00:03:47,770
So to display the name of the person who owns the server, it'll show all the other players in the server.

67
00:03:47,770 --> 00:03:50,740
And your only option is to leave the server if you'd like.

68
00:03:51,670 --> 00:03:54,850
Another frame we'll have in here is for entering a password.

69
00:03:54,850 --> 00:03:57,250
So let's say a player requests to join a server.

70
00:03:57,250 --> 00:03:59,410
But that server has a password.

71
00:03:59,440 --> 00:04:02,230
Then it'll enable this enter password screen.

72
00:04:02,410 --> 00:04:04,060
We'll type in the password.

73
00:04:04,060 --> 00:04:05,050
We'll hit submit.

74
00:04:05,050 --> 00:04:11,140
If the password is correct then it will open up that in server menu and place us in the server.

75
00:04:11,140 --> 00:04:15,040
Otherwise it'll display the message saying like incorrect password.

76
00:04:15,040 --> 00:04:16,300
And then we can try again.

77
00:04:16,300 --> 00:04:20,050
Or we can go ahead and hit back to go back to the server menu.

78
00:04:21,460 --> 00:04:26,050
So a pretty simple guy, just a lot of different frames that we're going to have to script.

79
00:04:26,350 --> 00:04:29,110
And there's also a sound in here for when we click buttons.

80
00:04:29,110 --> 00:04:31,060
It'll just play this click sound.

81
00:04:32,340 --> 00:04:36,300
So let's go ahead and go inside of starter player and inside of starter player scripts.

82
00:04:36,300 --> 00:04:40,350
The script for our GUI isn't actually going to be inside of the GUI, though.

83
00:04:40,350 --> 00:04:41,970
That is one way you could do it.

84
00:04:41,970 --> 00:04:45,870
But I do want to keep all of my scripts within the same folder.

85
00:04:45,870 --> 00:04:48,690
So we'll have our starting menu handler right here.

86
00:04:49,590 --> 00:04:54,390
And the three services we're going to need in here, of course, is going to be replicated storage.

87
00:04:57,130 --> 00:04:59,950
We're going to need the player service.

88
00:05:01,330 --> 00:05:03,730
And then we're going to need the tween service.

89
00:05:06,680 --> 00:05:11,210
Now we're going to need a lot of variables in here, because we're going to be referencing all different

90
00:05:11,210 --> 00:05:13,670
sorts of buttons and frames in here.

91
00:05:13,820 --> 00:05:20,540
But we need to first create the table that is going to store all of the functions, or basically just

92
00:05:20,540 --> 00:05:22,850
be the table that gets returned from this module script.

93
00:05:22,850 --> 00:05:24,650
So we'll just call it main guy.

94
00:05:26,330 --> 00:05:30,140
And we'll return main guy at the end of our module script.

95
00:05:30,140 --> 00:05:34,130
And of course we're going to have a function in our main guy.

96
00:05:35,020 --> 00:05:40,390
For initializing everything, or basically connecting all of the different functions to the different

97
00:05:40,390 --> 00:05:41,380
button events.

98
00:05:41,650 --> 00:05:45,010
But besides that, let's go ahead and start filling out our variables.

99
00:05:45,040 --> 00:05:51,340
So first I want to make a reference to the, uh, server event or that remote function that's inside

100
00:05:51,340 --> 00:05:52,390
of replicated storage.

101
00:05:52,390 --> 00:05:57,310
So replicated storage, dot events, dot remotes, dot server event.

102
00:05:57,310 --> 00:06:02,920
We do not have to use wait for child because this script will only run once the game is loaded.

103
00:06:03,280 --> 00:06:05,500
And since our.

104
00:06:06,200 --> 00:06:09,980
Remotes here are already existing within studio.

105
00:06:09,980 --> 00:06:14,060
That means they're going to be part of the snapshot the player will download when they join the game,

106
00:06:14,060 --> 00:06:16,100
so there's no need to use wait for child.

107
00:06:16,520 --> 00:06:19,430
We can reference our update guy event as well.

108
00:06:22,270 --> 00:06:26,260
And then of course we're going to reference our server actions.

109
00:06:27,750 --> 00:06:28,500
Enum.

110
00:06:28,770 --> 00:06:30,420
Server actions.

111
00:06:30,450 --> 00:06:31,230
Enum.

112
00:06:34,140 --> 00:06:39,750
We're going to require the module script that is in the modules enums folder.

113
00:06:40,830 --> 00:06:43,650
Or let me rename this to Server Action enums.

114
00:06:44,880 --> 00:06:49,980
Next I'm going to create a reference to the local player, so I'll just call it local player.

115
00:06:50,250 --> 00:06:52,530
It's equal to players dot local player.

116
00:06:53,270 --> 00:06:56,720
I'm going to make a reference to the guy itself as well.

117
00:06:56,720 --> 00:07:02,060
And since I have disabled reset on spawn, we do not have to update this variable every time.

118
00:07:02,060 --> 00:07:06,770
Let's say the player resets and the player shouldn't be able to reset because we've disabled it.

119
00:07:06,770 --> 00:07:10,790
But let's say an exploiter somehow resets themselves or something weird happens.

120
00:07:10,790 --> 00:07:16,370
We'll still be able to reference the same guy because I've disabled the reset on spawn property.

121
00:07:16,940 --> 00:07:23,300
So what we need to do is we need to reference our local player, get their player guy folder, and this

122
00:07:23,300 --> 00:07:25,160
is where we need to use wait for child.

123
00:07:25,160 --> 00:07:29,750
We need to wait for our starting menu because it's not going to exist right away.

124
00:07:29,750 --> 00:07:35,660
It has to get duplicated or cloned from the start of guy into our player object.

125
00:07:35,660 --> 00:07:38,240
So we have to make sure to wait for the starting menu.

126
00:07:38,270 --> 00:07:43,040
However, once we finally waited for the starting menu, we don't need to wait for any of the other

127
00:07:43,040 --> 00:07:48,770
descendants of the starter menu, so that means we can create a reference to our click sound using Guy,

128
00:07:48,980 --> 00:07:50,870
click sound or click.

129
00:07:51,230 --> 00:07:55,130
And then we can go ahead and start making some references to different frames.

130
00:07:55,130 --> 00:08:00,530
So the first frames I'm going to make references to or the buttons I'm going to make references to is

131
00:08:00,530 --> 00:08:07,430
the server frame which is guy example server and then the player frame.

132
00:08:08,090 --> 00:08:09,500
Example player.

133
00:08:09,680 --> 00:08:12,350
Now this section here is going to be for the main menu.

134
00:08:12,350 --> 00:08:14,630
So we'll have a reference to the main frame.

135
00:08:14,630 --> 00:08:17,600
So we'll just call it main is equal to guy dot main.

136
00:08:17,780 --> 00:08:22,100
And we'll have the main server menu button.

137
00:08:22,100 --> 00:08:26,030
So that's equal to main dot server menu button.

138
00:08:26,030 --> 00:08:28,760
So that's the button we'll click to go into the server menu.

139
00:08:29,520 --> 00:08:31,380
And then we'll also have the about button.

140
00:08:31,380 --> 00:08:34,470
So we'll call it main about button.

141
00:08:34,710 --> 00:08:36,900
So main about button.

142
00:08:37,080 --> 00:08:42,120
And if you're noticing or not I'm starting all of these names out with the frames name.

143
00:08:42,120 --> 00:08:49,230
That way when we type out the name of it, the auto fill will allow us to display all of the different

144
00:08:49,230 --> 00:08:52,860
buttons or frames that belong to a particular frame.

145
00:08:53,430 --> 00:08:55,830
So now I can make a section for our about menu.

146
00:08:57,420 --> 00:09:01,230
So about menu is equal to G dot about menu.

147
00:09:01,230 --> 00:09:05,550
And then the back button we'll just call about back button.

148
00:09:06,380 --> 00:09:10,370
About menu dot go back button.

149
00:09:11,390 --> 00:09:13,760
We'll have a section for the server menu.

150
00:09:13,760 --> 00:09:18,680
So this will be server menu GUI server menu.

151
00:09:18,890 --> 00:09:21,380
We'll have a reference to the Create Server button.

152
00:09:21,380 --> 00:09:26,210
So we'll call it create button equals server menu dot create server button.

153
00:09:27,110 --> 00:09:30,080
We'll have one for joining a server.

154
00:09:32,140 --> 00:09:36,250
And then we'll have one for going back to the main menu.

155
00:09:36,250 --> 00:09:39,280
So back button equal to server menu dot.

156
00:09:39,280 --> 00:09:40,750
Go back button.

157
00:09:41,020 --> 00:09:46,840
The next frame we're going to create some references to is when you're inside of the server.

158
00:09:46,840 --> 00:09:48,910
So we'll call it in server menu.

159
00:09:49,870 --> 00:09:52,720
So in server menu.

160
00:09:53,650 --> 00:09:56,290
Is equal to guy in server menu.

161
00:09:56,290 --> 00:09:59,350
And then we only have a leave button for that.

162
00:09:59,350 --> 00:10:08,410
So we'll just call it in server leave button which is in server menu dot leave server button.

163
00:10:10,160 --> 00:10:14,390
Will next have a reference to all of the different buttons in the owner menu.

164
00:10:14,390 --> 00:10:22,790
So in Server owner menu we'll call it in owner menu GUI dot in server menu owner.

165
00:10:24,100 --> 00:10:26,860
So we'll have a delete button reference.

166
00:10:26,860 --> 00:10:30,070
So in owner uh delete.

167
00:10:31,520 --> 00:10:33,500
Button is equal to in owner menu.

168
00:10:33,500 --> 00:10:37,250
Dot delete server button.

169
00:10:40,400 --> 00:10:43,070
Uh, we'll have one for the remove player button.

170
00:10:46,470 --> 00:10:49,200
And then we'll have one for starting the server.

171
00:10:49,200 --> 00:10:56,040
So in owner start button is equal to in owner menu dot start game button.

172
00:10:56,910 --> 00:11:01,650
Uh the next one will have to make references for is the menu to create a server.

173
00:11:01,650 --> 00:11:05,370
So we'll call it Create server menu.

174
00:11:05,400 --> 00:11:09,990
So create menu is equal to G dot create server menu.

175
00:11:11,100 --> 00:11:14,250
Um we'll have a reference to the settings frame that is in that menu.

176
00:11:14,250 --> 00:11:19,050
So settings frame is equal to create menu dot settings frame.

177
00:11:20,320 --> 00:11:27,310
We have that other menu for when we enter in a password or not, so we'll call it password.

178
00:11:27,340 --> 00:11:32,470
Toggle menu settings frame dot password toggle.

179
00:11:33,510 --> 00:11:38,220
And then we also need to create a reference to all those other different buttons.

180
00:11:38,220 --> 00:11:47,130
So like the create password toggle button which is equal to password toggle menu dot I believe it's

181
00:11:47,130 --> 00:11:47,970
called toggle.

182
00:11:47,970 --> 00:11:48,210
Yep.

183
00:11:48,210 --> 00:11:49,020
There it is.

184
00:11:50,130 --> 00:11:56,130
We have that password input box so we can call it password input.

185
00:11:56,160 --> 00:11:57,510
We can call it box or menu.

186
00:11:57,510 --> 00:11:58,680
I'll just call it menu.

187
00:11:58,710 --> 00:12:03,780
Equal to settings frame dot password input.

188
00:12:05,790 --> 00:12:08,580
We have that frame for representing the server size.

189
00:12:08,580 --> 00:12:13,710
I'll just call it server size menu, just to say consistent with the menu name format.

190
00:12:13,770 --> 00:12:18,660
So that's equal to the settings frame dot server size.

191
00:12:19,650 --> 00:12:24,660
And then we'll create a reference to those two buttons for increasing and decreasing the server size.

192
00:12:24,660 --> 00:12:34,980
We'll call it create increase button equal to server size menu dot plus and then create decrease button

193
00:12:34,980 --> 00:12:38,760
which is equal to server size menu minus.

194
00:12:40,340 --> 00:12:42,770
And then we'll also have a reference to that create button.

195
00:12:42,770 --> 00:12:48,710
So create button is equal to create menu dot create server button.

196
00:12:48,980 --> 00:12:51,890
And then we'll have a reference to that cancel button.

197
00:12:51,890 --> 00:12:57,380
So create cancel button is equal to create menu dot cancel server button.

198
00:12:58,040 --> 00:13:03,290
The next frame we need to make references for is the entering a password frame.

199
00:13:03,290 --> 00:13:06,380
So we'll call it Enter password menu.

200
00:13:06,890 --> 00:13:12,350
So enter password menu is equal to g dot enter password.

201
00:13:13,770 --> 00:13:16,500
We will have that input box.

202
00:13:16,500 --> 00:13:18,450
So enter password.

203
00:13:18,450 --> 00:13:23,580
We'll just call it input is equal to enter password menu dot text box.

204
00:13:24,820 --> 00:13:30,790
Um, we'll have a reference to the submit button, so enter password.

205
00:13:31,600 --> 00:13:40,720
Submit button is equal to enter password menu dot submit button and then enter password go back button.

206
00:13:40,720 --> 00:13:47,320
We'll just call it back button is equal to enter password menu dot go back or it's the back button.

207
00:13:48,100 --> 00:13:48,670
Okay.

208
00:13:48,670 --> 00:13:49,210
Stay in there.

209
00:13:49,210 --> 00:13:50,140
We're almost done.

210
00:13:50,140 --> 00:13:53,260
We'll need to have a reference to the message menu.

211
00:13:54,660 --> 00:13:59,850
So message menu is equal to G dot message menu.

212
00:13:59,850 --> 00:14:02,370
And then we just have that one okay button in there.

213
00:14:02,370 --> 00:14:05,790
So we'll just call it message menu okay.

214
00:14:05,790 --> 00:14:10,860
Button is equal to message menu dot okay button.

215
00:14:11,820 --> 00:14:16,980
And then the last frame or the last menu will have is that teleport menu.

216
00:14:17,670 --> 00:14:21,570
So teleport menu is equal to GUI dot teleport menu.

217
00:14:21,600 --> 00:14:22,260
All right.

218
00:14:22,590 --> 00:14:27,360
We're good to go there with all the references to the different frames and buttons.

219
00:14:27,660 --> 00:14:31,590
Now let's go ahead and create some other variables.

220
00:14:31,950 --> 00:14:38,520
Uh, we'll have a variable to keep track of the selected server, because what's going to happen is

221
00:14:38,520 --> 00:14:41,100
we'll have that server list on our screen.

222
00:14:41,550 --> 00:14:44,220
So let me go ahead and enable the server menu.

223
00:14:44,220 --> 00:14:46,350
So we'll have all the listed servers in here.

224
00:14:46,350 --> 00:14:48,180
And we'll be able to click a server.

225
00:14:48,180 --> 00:14:53,340
It'll highlight that server and it'll make this uh join server button usable.

226
00:14:53,760 --> 00:14:57,660
So we're going to have this variable keep track of what our selected server is.

227
00:14:57,660 --> 00:15:00,360
So we'll just call it selected server.

228
00:15:00,360 --> 00:15:02,400
And right now we're just going to set it to nil.

229
00:15:02,610 --> 00:15:08,820
We're also going to do the same thing for when the owner of a server selects a player.

230
00:15:08,820 --> 00:15:13,200
So we'll call this um selected player.

231
00:15:13,200 --> 00:15:14,910
And we're also going to set it to nil.

232
00:15:16,080 --> 00:15:26,550
Um we're going to use a boolean to keep track of whether or not we have enabled the password for a server.

233
00:15:26,550 --> 00:15:29,850
So let's say we're creating a server and we want to have a password.

234
00:15:29,850 --> 00:15:34,740
We'll use a boolean to keep track of whether or not we want a password.

235
00:15:34,740 --> 00:15:41,400
So we could just call this variable like is password enabled or is password like on.

236
00:15:41,730 --> 00:15:43,440
We'll set it to false as default.

237
00:15:44,230 --> 00:15:49,180
And then, uh, another variable we're going to have is to keep track of whether or not we currently

238
00:15:49,180 --> 00:15:50,050
own a server.

239
00:15:50,050 --> 00:15:53,020
And this is just a little bit of some server side protection.

240
00:15:53,020 --> 00:15:57,850
That way we can prevent us from firing some events that we aren't supposed to because we're owning a

241
00:15:57,850 --> 00:15:58,450
server.

242
00:15:58,450 --> 00:16:04,150
This isn't going to stop exploiters, but it will stop regular players in your game from doing things

243
00:16:04,150 --> 00:16:07,150
that you don't expect them to do because they're an owner of a server.

244
00:16:07,150 --> 00:16:11,680
So we'll just call it currently owning server, and we're going to set that to false as well.

245
00:16:12,460 --> 00:16:14,830
Now we're going to set some constants here.

246
00:16:15,870 --> 00:16:21,030
These constants are going to represent the, um, button colors.

247
00:16:21,030 --> 00:16:24,930
So this, uh, button here has a faded out color.

248
00:16:24,930 --> 00:16:26,670
So we'll need to keep track of that color.

249
00:16:26,670 --> 00:16:29,670
And we're also going to need to keep track of this brighten color.

250
00:16:29,910 --> 00:16:35,130
And then we're going to have two other constants to represent the minimum and maximum server size.

251
00:16:36,450 --> 00:16:39,630
So what we could do here is we could create a constant.

252
00:16:39,630 --> 00:16:42,540
We'll just call it max server size.

253
00:16:42,540 --> 00:16:46,680
We'll set it to ten and one for a minimum server size.

254
00:16:46,680 --> 00:16:47,940
And we'll set it to one.

255
00:16:49,700 --> 00:16:54,590
The button color will be the one for the default bright color.

256
00:16:54,590 --> 00:17:00,710
So from RGB and we can just basically just go in here and find one of these buttons like go back, copy

257
00:17:00,710 --> 00:17:02,930
this background color and paste that in there.

258
00:17:03,080 --> 00:17:04,430
And then we'll create another one.

259
00:17:04,430 --> 00:17:07,820
We'll just call it button color dark.

260
00:17:07,820 --> 00:17:12,140
So color three from RGB and we'll go to the Join server button.

261
00:17:12,140 --> 00:17:13,340
Here's the darkened color.

262
00:17:13,340 --> 00:17:15,860
We'll copy that and paste that in there.

263
00:17:16,540 --> 00:17:24,400
And actually, I don't remember whether or not we have verified the size of a server on the server side.

264
00:17:24,400 --> 00:17:27,400
So actually let me let's let's go ahead and check in here.

265
00:17:27,550 --> 00:17:36,640
So when we go to create a new server object, the max size here are we should verify that the number

266
00:17:36,640 --> 00:17:42,160
that gets passed to this constructor is greater than one and less than ten, because the client is going

267
00:17:42,160 --> 00:17:44,170
to be passing this information to the server.

268
00:17:44,170 --> 00:17:50,680
We don't want exploiters creating servers with like a negative size or a size that's like a 1000.

269
00:17:50,920 --> 00:17:55,600
So what I could do is I'm going to add one more if statement in here, and I'm going to check if max

270
00:17:55,600 --> 00:17:56,500
size.

271
00:17:57,410 --> 00:18:06,380
If it's less than one, or if max size is greater than ten, then we're going to return false and say

272
00:18:06,380 --> 00:18:15,710
something like size of server is restricted to 1 to 10 players.

273
00:18:15,740 --> 00:18:17,540
So back to our local script.

274
00:18:17,540 --> 00:18:20,630
Let's go ahead and fill out our private functions section.

275
00:18:21,080 --> 00:18:26,210
Now since we have a lot of buttons in our guy, I'm actually going to create a function dedicated to

276
00:18:26,210 --> 00:18:27,800
just playing the click sound.

277
00:18:27,800 --> 00:18:33,590
That way in the future, if we ever wanted to change the click sound, or maybe add some extra functionality

278
00:18:33,590 --> 00:18:39,020
or features to like the click sound, then we can do it directly from a single function.

279
00:18:39,020 --> 00:18:44,660
So I'm just going to create a function called um play Click sound.

280
00:18:44,960 --> 00:18:48,680
And all it's going to do at the moment is just play our click sound.

281
00:18:49,340 --> 00:18:55,130
But in case we ever wanted to add more features in the future, we can do so right in this function.

282
00:18:55,130 --> 00:18:57,800
And we don't have to go and rewrite all of our code.

283
00:18:57,800 --> 00:19:02,000
So I'll just leave a note here for any future functionality.

284
00:19:02,870 --> 00:19:08,330
Next up, I'm going to create a function for when we click any of the server frames.

285
00:19:08,330 --> 00:19:14,120
So these example server text buttons we want to listen for when we click one of those.

286
00:19:14,120 --> 00:19:16,820
And when we do we can create a highlight around them.

287
00:19:16,820 --> 00:19:22,790
So I'll call this function on server frame clicked.

288
00:19:24,130 --> 00:19:28,000
And then we'll do the same thing for when a player frame is clicked.

289
00:19:28,000 --> 00:19:30,790
So on player frame clicked.

290
00:19:31,480 --> 00:19:33,700
We'll have some functionality in there as well.

291
00:19:33,970 --> 00:19:39,460
We'll have a function for displaying a message on the screen using the display menu, so we'll call

292
00:19:39,460 --> 00:19:40,870
it Display Message.

293
00:19:42,220 --> 00:19:46,120
We'll have a function for creating a server frame.

294
00:19:46,120 --> 00:19:50,830
So when the server tells us to create a new server frame because someone just created a server, we'll

295
00:19:50,830 --> 00:19:52,120
use this function to do it.

296
00:19:52,270 --> 00:19:59,410
And we'll also do the same for creating a player frame and destroying a server frame and destroying

297
00:19:59,410 --> 00:20:00,040
a player frame.

298
00:20:00,040 --> 00:20:04,930
So here I'll just create a function for destroying a server frame.

299
00:20:06,010 --> 00:20:09,670
We'll have a function for creating a player frame.

300
00:20:10,760 --> 00:20:15,680
And then we'll have a function for destroying a player frame.

301
00:20:18,150 --> 00:20:25,620
Next up, I want to have a function for completely clearing out the player list that's inside of our

302
00:20:25,620 --> 00:20:26,940
in server menu.

303
00:20:27,030 --> 00:20:33,150
Because let's say I leave a server, then I want to delete everything that's inside of our player list.

304
00:20:33,150 --> 00:20:37,500
That is not the default, uh, different UI properties here.

305
00:20:37,500 --> 00:20:41,460
So I want to delete any example players that were inside of our player list.

306
00:20:41,460 --> 00:20:45,120
So I'll just call this function something like Clear Player list.

307
00:20:45,240 --> 00:20:46,410
And that's it.

308
00:20:47,890 --> 00:20:52,630
I'll have a function for joining a server.

309
00:20:54,350 --> 00:21:01,130
Um, and then one last function we'll need is for updating the server count for a particular server.

310
00:21:01,130 --> 00:21:04,640
So we'll just call this update server count.

311
00:21:05,230 --> 00:21:10,510
And I think that's all of the private functions that we're going to need for our starting menu.

312
00:21:10,930 --> 00:21:16,900
Now inside of our initialize function here we are going to have to do a bunch of stuff because this

313
00:21:16,900 --> 00:21:23,170
is the function where we're going to connect, uh, different functions to all of the different buttons.

314
00:21:23,170 --> 00:21:27,550
We're going to be listening to that update UI event and all that kind of good stuff.

315
00:21:27,550 --> 00:21:31,930
So I guess the first thing we could do is we could listen to our update guy event.

316
00:21:31,930 --> 00:21:36,370
So on client event we're going to connect a Lambda function.

317
00:21:36,370 --> 00:21:43,060
And remember we get passed an action and some arguments supplied to that action from the server.

318
00:21:44,020 --> 00:21:51,640
So one of those actions could be inside of our server action enums dot two client.

319
00:21:52,330 --> 00:21:55,510
And one of the actions we could first do is adding a server.

320
00:21:55,510 --> 00:21:58,330
So let's say the server tells us to add a new server.

321
00:21:59,110 --> 00:22:02,770
Then what we could do is we could get that server to add.

322
00:22:02,770 --> 00:22:08,380
And if you remember, it's the first, uh, element within our args table.

323
00:22:08,380 --> 00:22:10,360
So that's our server we want to add.

324
00:22:10,480 --> 00:22:17,530
And we could literally just call our create server frame function and pass this server object to this

325
00:22:17,530 --> 00:22:18,220
function.

326
00:22:18,960 --> 00:22:22,860
And actually, let's go ahead and fill out this function since we're calling it right here.

327
00:22:23,040 --> 00:22:28,470
So up in our create server frame we're getting past the server we want to create.

328
00:22:28,470 --> 00:22:31,290
So we'll just call it server to add.

329
00:22:32,160 --> 00:22:39,060
And remember in our server service when we tell the player to add a server we're passing to them right

330
00:22:39,060 --> 00:22:39,870
here.

331
00:22:40,900 --> 00:22:44,740
Uh, a server object that was created by our server service constructor.

332
00:22:44,740 --> 00:22:50,740
So that means that this object is going to store all of the, um, let me find it.

333
00:22:50,740 --> 00:22:55,480
It's going to tell us the owner, it's going to tell us whether or not it has a password the size,

334
00:22:55,480 --> 00:22:58,270
who's in the server, blah, blah, blah, blah, stuff like that.

335
00:22:58,720 --> 00:23:00,070
So what we could do.

336
00:23:01,000 --> 00:23:09,790
Is we're going to loop through every single server that currently exists within our server menu dot

337
00:23:09,790 --> 00:23:12,490
list, and we're going to get all of the children.

338
00:23:16,170 --> 00:23:22,500
And we're going to make sure that the server the server is telling us to create doesn't already exist.

339
00:23:22,500 --> 00:23:26,520
For some reason, if it does already exist, then we don't want to do anything right.

340
00:23:26,520 --> 00:23:30,780
We don't want to have duplicate servers in our server menu list.

341
00:23:31,350 --> 00:23:31,710
Now.

342
00:23:31,710 --> 00:23:36,960
One way we could keep track of the different owners for these server frames is by setting an attribute

343
00:23:36,960 --> 00:23:39,750
on them that represents the name of the owner.

344
00:23:40,770 --> 00:23:45,780
So before we do that here, when we create a new server, what I'm going to do is I'm going to make

345
00:23:45,780 --> 00:23:48,090
a clone of our server frame.

346
00:23:49,960 --> 00:23:54,610
And we're going to set an attribute on this clone and we'll call it owner.

347
00:23:54,610 --> 00:23:56,080
So this is the owner of the server.

348
00:23:56,080 --> 00:23:59,650
And it's going to be equal to the server to add dot owner.

349
00:23:59,650 --> 00:24:01,660
And we're going to get the name of the owner.

350
00:24:02,290 --> 00:24:08,170
So that way we can keep track of every single one of those different uh example server buttons.

351
00:24:08,170 --> 00:24:11,230
We're going to set an attribute on them, the owner of the server.

352
00:24:11,230 --> 00:24:16,900
That way when we select one of these buttons and we want to join a server, we just get that name attribute

353
00:24:16,900 --> 00:24:18,970
and pass that name to the server.

354
00:24:19,950 --> 00:24:24,990
And then we're also going to set an attribute of whether or not the server has a password.

355
00:24:24,990 --> 00:24:27,120
So we can call it has password.

356
00:24:27,630 --> 00:24:31,680
And we'll set that equal to server to add has password.

357
00:24:31,950 --> 00:24:33,780
So that'll be true or false.

358
00:24:34,800 --> 00:24:37,320
Then what we could do is that inside of this clone.

359
00:24:37,990 --> 00:24:45,580
We can set the server name, which is a text label, and set the text equal to server to add.

360
00:24:45,760 --> 00:24:48,640
Get the owner get their name.

361
00:24:49,560 --> 00:24:54,870
And then we can literally just concatenate it with an apostrophe s and say server.

362
00:24:54,870 --> 00:25:00,630
So whatever the name of the owner is, we'll put an apostrophe s and tell them that this is their server.

363
00:25:01,400 --> 00:25:03,950
Next we need to set the player count for the server.

364
00:25:03,950 --> 00:25:09,740
So clone dot player count dot text is going to be equal to.

365
00:25:09,770 --> 00:25:12,350
We're going to get the number of players in the server.

366
00:25:12,350 --> 00:25:17,960
So basically number and server to add dot players in server.

367
00:25:19,150 --> 00:25:28,270
We'll concatenate it with a slash and then concatenate it with the server to add dot max size.

368
00:25:28,300 --> 00:25:33,520
So if there's three players in the server and the max size is ten, it'll display three slash ten.

369
00:25:34,540 --> 00:25:38,500
Then once we set the text for this clone, we can set the parent.

370
00:25:39,450 --> 00:25:42,270
Equal to the server menu list.

371
00:25:43,610 --> 00:25:48,110
We'll make sure that this is now visible on the client.

372
00:25:48,680 --> 00:25:55,160
And then what we could do here is we could get this clone, and then we can listen for when we click

373
00:25:55,160 --> 00:25:55,280
it.

374
00:25:55,280 --> 00:25:58,550
So mouse button one click we're going to connect a lambda function.

375
00:25:58,550 --> 00:26:02,750
And we're going to call that on server frame clicked function.

376
00:26:03,470 --> 00:26:09,200
And to keep track of which server frame we clicked we're going to pass the clone itself to this function.

377
00:26:10,190 --> 00:26:13,040
So now let's go ahead and actually fill out this function as well.

378
00:26:13,540 --> 00:26:20,860
So on our on server frame clicked function, we get past this particular, uh, text button.

379
00:26:20,860 --> 00:26:26,800
So we'll just call it, uh, either text button or for simplicity's sake, we'll just call it frame.

380
00:26:28,300 --> 00:26:31,870
And when we click it, of course we want to play our click sound.

381
00:26:31,870 --> 00:26:33,220
So play click sound.

382
00:26:34,360 --> 00:26:39,280
Then we want to check if we have a server already selected.

383
00:26:39,280 --> 00:26:47,020
So if we already have a server selected, then what we want to do is we want to get that selected server,

384
00:26:47,020 --> 00:26:51,040
which will be a reference to whatever button or text button it is.

385
00:26:51,040 --> 00:26:56,890
And we want to set the border or the UI stroke within that server.

386
00:26:56,890 --> 00:27:02,410
We want to set the visibility to nothing or basically just disable the UI stroke.

387
00:27:02,410 --> 00:27:05,860
So border dot enabled is equal to false.

388
00:27:06,420 --> 00:27:13,710
Then with this newly selected, um, text button, what we're going to do is we're going to do frame

389
00:27:13,710 --> 00:27:16,590
dot border dot enabled is equal to true.

390
00:27:17,330 --> 00:27:23,540
And then we're going to update our selected server variable equal to this new frame.

391
00:27:24,200 --> 00:27:31,580
And now, because we've selected a new server, that means inside of our GUI, if we go to our server

392
00:27:31,580 --> 00:27:32,300
menu.

393
00:27:33,740 --> 00:27:36,020
So let's say there's a server list in here.

394
00:27:36,020 --> 00:27:37,430
We click a server right.

395
00:27:37,430 --> 00:27:38,690
We've selected a server.

396
00:27:38,690 --> 00:27:40,670
Then we want to make this button usable.

397
00:27:40,670 --> 00:27:43,730
So we want to change the background color of our join server button.

398
00:27:44,700 --> 00:27:53,310
So we can do server, uh, join button reference or server join button and set the background color

399
00:27:53,550 --> 00:27:56,880
equal to the default button color.

400
00:27:57,520 --> 00:27:59,890
And that's all we need to do for this function.

401
00:28:00,220 --> 00:28:00,670
Okay.

402
00:28:00,670 --> 00:28:01,180
Looks good.

403
00:28:01,180 --> 00:28:04,630
Let's go ahead and listen to a different action now.

404
00:28:04,900 --> 00:28:12,430
So let's say the action that the server wants us to do is equal to like let's say removing a server.

405
00:28:12,430 --> 00:28:15,640
So server action enums dot two client.

406
00:28:15,670 --> 00:28:18,640
Let's say the server tells us to remove a server.

407
00:28:19,120 --> 00:28:25,960
Then what we could do is we could get the server that the, you know, server wants us to remove.

408
00:28:26,380 --> 00:28:29,830
And that's going to be the first argument in that args table.

409
00:28:29,950 --> 00:28:35,230
And what we could do is we could call our destroy server frame function and pass the server that we

410
00:28:35,230 --> 00:28:36,520
wish to remove.

411
00:28:39,350 --> 00:28:45,050
So inside of our destroy server frame function, what we could do is we could loop through every single

412
00:28:45,050 --> 00:28:48,560
server that exists in our server menu list.

413
00:28:48,560 --> 00:28:55,370
So in Ipairs server menu dot list and we're going to get all of the children.

414
00:28:56,200 --> 00:29:03,400
And what we're going to do is we're going to find the server whose owner attribute matches the name

415
00:29:03,400 --> 00:29:04,930
of the server we want to destroy.

416
00:29:04,930 --> 00:29:09,190
So we'll get past the server that we need to remove.

417
00:29:10,000 --> 00:29:14,860
And we're going to check if this, uh, current server.

418
00:29:16,230 --> 00:29:20,250
Or oops, let me type it out for fully current server.

419
00:29:20,640 --> 00:29:23,070
Get attribute owner.

420
00:29:23,280 --> 00:29:30,090
If the owner is equal to server two, remove dot owner dot name.

421
00:29:30,830 --> 00:29:39,050
Then what we need to do is we also need to check whether or not we have this server selected.

422
00:29:39,640 --> 00:29:43,120
So let's say inside of our server menu we've selected a server.

423
00:29:43,120 --> 00:29:45,460
And then all of a sudden that server gets deleted.

424
00:29:45,460 --> 00:29:45,700
Right.

425
00:29:45,700 --> 00:29:49,090
So we need to clear out our selected server variable.

426
00:29:49,090 --> 00:29:50,980
So if selected server.

427
00:29:50,980 --> 00:29:56,830
So if we have a server selected and the selected servers attribute get attribute.

428
00:30:00,320 --> 00:30:07,340
Owner is also equal to the owner of the server we need to remove.

429
00:30:07,880 --> 00:30:15,530
Then what we're going to do is we're going to get the border within our selected server set, enable

430
00:30:15,530 --> 00:30:19,190
to false, and then we'll set selected server to nil.

431
00:30:20,710 --> 00:30:27,490
And then what we're going to do is we're going to set the server join button dot background color equal

432
00:30:27,490 --> 00:30:30,430
to the dark button color or button color dark.

433
00:30:31,080 --> 00:30:33,480
Because we don't have a server selected anymore.

434
00:30:34,440 --> 00:30:38,520
And then we can just destroy this server frame.

435
00:30:38,960 --> 00:30:40,820
And that's all we need to do there.

436
00:30:41,120 --> 00:30:44,090
Now let's say the next action the server wants us to do.

437
00:30:44,980 --> 00:30:48,970
Is to add a player to a player list.

438
00:30:48,970 --> 00:30:56,140
So if action is equal to server action enums dot two client dot add to player list.

439
00:30:56,960 --> 00:31:04,550
Then we can get the player they want us to add, which is again the first index in our arguments table,

440
00:31:04,550 --> 00:31:11,060
and we can call our create player frame function and pass the player we wish to add.

441
00:31:11,810 --> 00:31:14,750
So now let's go ahead and fill out this function as well.

442
00:31:14,780 --> 00:31:17,780
So back up at our Create player frame function.

443
00:31:18,200 --> 00:31:21,410
We're going to get the player that the server wants us to add.

444
00:31:23,070 --> 00:31:27,990
And just like what we did in our create server frame function, we're going to loop through all of the

445
00:31:27,990 --> 00:31:30,810
current players and make sure that this player doesn't already exist.

446
00:31:30,810 --> 00:31:33,330
So we actually need to finish filling out this for loop.

447
00:31:33,330 --> 00:31:38,250
I forgot we didn't finish filling that out yet, but basically in here, what we need to do is we need

448
00:31:38,250 --> 00:31:43,650
to check if this current server get attribute owner.

449
00:31:44,340 --> 00:31:48,600
Is equal to server to add owner dot name.

450
00:31:48,600 --> 00:31:52,500
And if it is, we're just going to return out of this function because we don't need to create a new

451
00:31:52,500 --> 00:31:53,400
server frame.

452
00:31:53,820 --> 00:31:57,720
And then we're basically actually just going to do the exact same thing for creating a player frame.

453
00:31:57,720 --> 00:32:01,710
We're going to loop through every single, uh, current player.

454
00:32:02,640 --> 00:32:13,440
Inside of our in server menu dot player list, and we actually have two different player lists, one

455
00:32:13,440 --> 00:32:18,270
inside of our in server menu and one inside of our in server menu owner.

456
00:32:18,270 --> 00:32:22,710
So you know what I'm going to save this for loop for later, because we need to make an if statement

457
00:32:22,710 --> 00:32:27,480
to check whether or not we're currently owning a server, which will determine whether or not we are

458
00:32:27,480 --> 00:32:31,890
in the in server menu, or if we are in the in server menu owner.

459
00:32:32,510 --> 00:32:36,860
So instead, what I'm going to do is I'm going to create a clone of our player frame.

460
00:32:38,250 --> 00:32:45,480
And we're going to set an attribute on this clone of owner, which will be the player to add dot name.

461
00:32:45,480 --> 00:32:51,120
So this is the owner of this particular example player text button.

462
00:32:52,220 --> 00:32:59,180
And then we're going to set the clone dot player name text label dot text equal to the player's name.

463
00:32:59,180 --> 00:33:01,430
So player two add dot name.

464
00:33:02,000 --> 00:33:07,850
And then what I'm going to do here is I'm going to try to get the thumbnail of this user by using a

465
00:33:07,850 --> 00:33:11,690
function within the player service called get user thumbnail async.

466
00:33:11,690 --> 00:33:15,440
And since it's an asynchronous function, we need to use p call on it.

467
00:33:15,620 --> 00:33:21,200
So I'm going to create two variables one called success, one called result equal to p call.

468
00:33:21,200 --> 00:33:28,850
And we're going to call inside of players the get user thumbnail async function.

469
00:33:29,550 --> 00:33:32,070
This is a function that uses a colon.

470
00:33:32,070 --> 00:33:36,210
So we need to pass the player service itself as the first argument.

471
00:33:36,510 --> 00:33:41,370
Then we need to pass the ID of the player that we want to get the thumbnail for.

472
00:33:41,370 --> 00:33:45,540
So we could do player to add dot user ID.

473
00:33:46,500 --> 00:33:53,880
And if we were successful in getting this image, then we can set the clone dot portrait, which is

474
00:33:53,880 --> 00:34:00,630
an image label, and set the image property equal to the result from our P call.

475
00:34:01,460 --> 00:34:07,280
Now we can use our currently owning server variable to check if we are currently owning a server.

476
00:34:07,280 --> 00:34:14,690
So if currently owning server then we need to loop through our in server or in owner menu.

477
00:34:14,720 --> 00:34:21,290
Otherwise we need to loop through our um in server menu when we aren't an owner.

478
00:34:22,810 --> 00:34:29,290
So what we're going to do here is we're going to loop through every single frame in Ipairs in the owner

479
00:34:29,290 --> 00:34:29,590
menu.

480
00:34:29,590 --> 00:34:31,870
So in owner menu and get the player list.

481
00:34:32,470 --> 00:34:34,330
And we're going to get all the children in there.

482
00:34:35,690 --> 00:34:41,450
And what we're going to do is we're going to check if this frame get attribute owner.

483
00:34:42,530 --> 00:34:45,650
Is equal to this player we want to add.

484
00:34:45,650 --> 00:34:52,400
So if player to add dot name is equal to the attribute on this frame, then for some reason we already

485
00:34:52,400 --> 00:34:53,510
have a frame for this player.

486
00:34:53,510 --> 00:34:55,250
We don't need to create a new one.

487
00:34:55,250 --> 00:34:58,910
So we're just going to destroy this clone we created.

488
00:34:58,910 --> 00:35:00,500
So clone destroy.

489
00:35:00,500 --> 00:35:03,590
And then we're just going to return out of this function.

490
00:35:04,070 --> 00:35:09,740
Otherwise we can set clone dot mouse button one click connect a function to it.

491
00:35:09,740 --> 00:35:12,590
And we're going to call the on player frame clicked.

492
00:35:12,590 --> 00:35:15,890
And again we're going to pass this frame itself.

493
00:35:16,660 --> 00:35:22,090
And then we can set the parent of this frame to be in the owner.

494
00:35:22,090 --> 00:35:24,160
Menu dot player list.

495
00:35:24,820 --> 00:35:31,900
Otherwise, if we aren't currently owning a server, that means we are an individual in somebody else's

496
00:35:31,900 --> 00:35:35,560
server and we need to update the player list in a different frame.

497
00:35:35,710 --> 00:35:39,910
So we're basically just going to do the exact same for loop here, but instead we need to loop through

498
00:35:39,910 --> 00:35:45,040
every single frame that is inside of the Inn server menu.

499
00:35:45,820 --> 00:35:50,920
And we need to see if that frame has an attribute that's equal to this player we want to add.

500
00:35:50,920 --> 00:35:54,280
If they already exist, then we don't need to create a new clone.

501
00:35:54,520 --> 00:36:02,020
And we also don't need to listen to clicking on a player frame, because when we are inside of our in

502
00:36:02,020 --> 00:36:03,070
server menu.

503
00:36:03,070 --> 00:36:06,460
So let me enable this and close out this one.

504
00:36:06,910 --> 00:36:09,850
When we're in here, we don't have the ability to kick other players.

505
00:36:09,850 --> 00:36:14,710
All we need to do is just sit in here and just see the other players that are going to be with us.

506
00:36:14,710 --> 00:36:21,640
So the only thing we need to do here is set the parent for this clone to be in server menu dot player

507
00:36:21,640 --> 00:36:22,360
list.

508
00:36:22,870 --> 00:36:27,850
And then once we've done all of that, we can just set the visibility of this clone equal to true.

509
00:36:27,850 --> 00:36:33,520
And actually I made one small mistake up here with the get user thumbnail async function.

510
00:36:33,520 --> 00:36:38,680
We need to pass another thing to this function which is an enum.

511
00:36:38,680 --> 00:36:41,350
So enum dot thumbnail.

512
00:36:42,230 --> 00:36:44,030
I believe it's type.

513
00:36:45,100 --> 00:36:49,120
We want to get a headshot of this player or a capture of their head.

514
00:36:49,120 --> 00:36:54,160
And then we also need to pass the enum dot thumbnail size.

515
00:36:54,160 --> 00:36:57,280
And we're just going to get a size of 180 by 180.

516
00:36:57,280 --> 00:36:58,270
It doesn't really matter.

517
00:36:58,600 --> 00:37:03,310
And then we can get the result from this p call and set the image on the portrait.

518
00:37:03,580 --> 00:37:04,150
Okay.

519
00:37:04,150 --> 00:37:05,110
Seems good.

520
00:37:05,590 --> 00:37:08,980
Now let's go ahead and fill out our on player frame clicked function.

521
00:37:08,980 --> 00:37:09,820
Because why not.

522
00:37:10,350 --> 00:37:14,040
So what do we want to do when a player frame gets clicked?

523
00:37:14,070 --> 00:37:17,010
Well, we want to play the click sound of course.

524
00:37:17,310 --> 00:37:21,090
And then we want to check if we have a selected player already.

525
00:37:21,090 --> 00:37:27,750
So if the owner of the server already has a selected player, then we're going to do selected player.

526
00:37:27,990 --> 00:37:32,850
Get the border that's in there as well, and set the enabled property to false.

527
00:37:34,330 --> 00:37:41,170
And then since this function also gets passed a frame, we want to set the border dot enabled on this

528
00:37:41,170 --> 00:37:42,220
frame to true.

529
00:37:42,700 --> 00:37:46,000
Selected player is going to be equal to this new frame.

530
00:37:47,060 --> 00:37:53,750
And then we need to update the color of the remove player button that's in the owner menu.

531
00:37:53,990 --> 00:38:01,700
So when we are the owner of a server so in server menu owner and we select a player, we want to change

532
00:38:01,700 --> 00:38:04,580
the background color of our remove player button.

533
00:38:05,240 --> 00:38:13,670
So in owner remove player button dot background color is equal to button color.

534
00:38:14,470 --> 00:38:14,920
All right.

535
00:38:14,920 --> 00:38:17,080
So far we are looking good.

536
00:38:17,230 --> 00:38:21,130
Let's go ahead and listen to a different action on the client.

537
00:38:21,280 --> 00:38:25,870
So let's say the server wants us to remove a player from a player list.

538
00:38:25,870 --> 00:38:36,010
So if the action is equal to server action enums dot two client dot remove from player list.

539
00:38:36,520 --> 00:38:40,000
Then when we need to do is we need to get this player we need to remove.

540
00:38:42,280 --> 00:38:48,610
And then we need to destroy the player frame for this particular player and pass player to remove.

541
00:38:48,610 --> 00:38:50,500
So let's go ahead and fill out this function.

542
00:38:51,010 --> 00:38:53,950
So to destroy a player frame.

543
00:38:54,560 --> 00:39:01,070
We need to decide which frame we need to destroy it out of, because again, we're going to have two

544
00:39:01,070 --> 00:39:06,890
different player lists, one in the server menu and one in the server menu if you're the owner of a

545
00:39:06,890 --> 00:39:07,610
server.

546
00:39:07,610 --> 00:39:14,600
So if we are currently owning a server, then we need to loop through every single frame that is in

547
00:39:14,600 --> 00:39:18,170
Ipairs in owner menu dot player list.

548
00:39:20,660 --> 00:39:27,950
And what we need to do is we need to check if the frame get attribute owner is equal to player two.

549
00:39:27,950 --> 00:39:29,720
Remove dot name.

550
00:39:31,720 --> 00:39:34,420
Then we can go ahead and destroy this frame.

551
00:39:34,450 --> 00:39:39,940
However, we also need to check if we have a selected player, right?

552
00:39:39,940 --> 00:39:44,200
If the owner of the server has a selected player, we need to make sure it's not the one that we're

553
00:39:44,200 --> 00:39:45,220
getting rid of.

554
00:39:45,220 --> 00:39:48,850
And if it is, we need to update our selected player variable.

555
00:39:49,480 --> 00:39:55,600
So if we have a selected player and selected player get attribute.

556
00:39:57,650 --> 00:39:58,430
Owner.

557
00:40:00,970 --> 00:40:03,910
Is equal to player to remove name.

558
00:40:05,710 --> 00:40:08,800
Then we can just do selected player.

559
00:40:09,820 --> 00:40:13,090
Dot border dot enabled equal to false.

560
00:40:13,090 --> 00:40:14,650
Selected player.

561
00:40:15,360 --> 00:40:17,040
Can be set to nil.

562
00:40:17,920 --> 00:40:25,480
And then in owner remove player button, we need to update that background color back to be dark.

563
00:40:26,240 --> 00:40:27,950
Now another way we could do this as well.

564
00:40:27,950 --> 00:40:32,990
Instead of having this long if statement here I just realized is we could instead.

565
00:40:33,750 --> 00:40:39,840
Um, see if this frame we're looping at is equal to the same frame that's stored within selected player.

566
00:40:39,840 --> 00:40:46,530
So instead what we could do is we could see if frame is equal to selected player.

567
00:40:46,530 --> 00:40:49,680
And if it is, then we can do this garbage right here.

568
00:40:49,800 --> 00:40:55,680
And we can actually do the exact same thing for when destroying a server frame.

569
00:40:56,310 --> 00:40:58,680
So if the.

570
00:40:59,780 --> 00:41:04,700
Current server is equal to the server or selected server.

571
00:41:06,230 --> 00:41:06,590
Oops.

572
00:41:06,590 --> 00:41:08,300
We're doing the long line here.

573
00:41:08,840 --> 00:41:10,130
So if.

574
00:41:11,810 --> 00:41:18,200
The current server is equal to the selected server, then we can go ahead and update our selected server

575
00:41:18,200 --> 00:41:18,950
variable.

576
00:41:19,220 --> 00:41:21,290
Okay, much more concise there.

577
00:41:21,950 --> 00:41:28,370
So now we need to add our else statement here for when we are in the other player list or the other

578
00:41:28,370 --> 00:41:28,850
menu.

579
00:41:28,850 --> 00:41:31,790
So for every single frame.

580
00:41:32,590 --> 00:41:38,740
And I pairs in server menu dot player list get children.

581
00:41:39,800 --> 00:41:46,190
What we're going to do is check if this frame get attribute owner.

582
00:41:47,080 --> 00:41:48,490
Is equal to player two.

583
00:41:48,490 --> 00:41:50,800
Remove dot name.

584
00:41:50,800 --> 00:41:52,720
Then we'll just destroy this frame.

585
00:41:53,520 --> 00:41:57,210
And that's it for our destroy player frame function.

586
00:41:58,050 --> 00:42:00,210
Let's listen to some more actions.

587
00:42:00,210 --> 00:42:02,250
So let's say the action.

588
00:42:02,920 --> 00:42:07,810
Is equal to server action enums dot two client dot.

589
00:42:08,230 --> 00:42:12,160
Let's say we were removed from a server, right?

590
00:42:12,640 --> 00:42:19,150
If we were removed from the server, then what we want to do is we want to set the in server menu dot

591
00:42:19,150 --> 00:42:20,980
visibility equal to false.

592
00:42:21,910 --> 00:42:25,450
We want to set the visibility of our server menu to true.

593
00:42:27,190 --> 00:42:29,200
And we want to display a message.

594
00:42:29,290 --> 00:42:34,270
So when we get this action given to us, we're going to be also given a message.

595
00:42:34,300 --> 00:42:41,260
So inside of server service, when we are removed from server we are given a message like you have been

596
00:42:41,260 --> 00:42:43,750
kicked from the server or you have left the server.

597
00:42:44,080 --> 00:42:47,410
So we want to go ahead and display that message on our screen.

598
00:42:48,240 --> 00:42:52,650
And we can actually go ahead and fill out that function as well, because why not?

599
00:42:52,830 --> 00:42:54,000
This should be fairly easy.

600
00:42:54,000 --> 00:42:56,940
All we're going to do is get a message.

601
00:42:58,360 --> 00:43:06,250
In our message menu, we're going to set the message text label dot text equal to this message.

602
00:43:06,310 --> 00:43:11,080
And we're going to set the visibility of our message menu to true.

603
00:43:11,080 --> 00:43:12,400
And that's all we need to do there.

604
00:43:13,310 --> 00:43:18,890
Now, another action we're going to have to listen to is, let's say the server wants us to update the

605
00:43:18,890 --> 00:43:21,890
server count for a particular server.

606
00:43:21,890 --> 00:43:24,350
So two clients update server count.

607
00:43:25,070 --> 00:43:28,970
Then we're going to get the server to update.

608
00:43:31,360 --> 00:43:35,200
And we're going to call our update server count function and pass the server.

609
00:43:35,200 --> 00:43:37,360
We need to update the server count on.

610
00:43:38,760 --> 00:43:41,070
So let's go ahead and fill out this function as well.

611
00:43:41,790 --> 00:43:42,930
We'll scroll up here.

612
00:43:42,930 --> 00:43:47,280
And when we need to do is we need to loop through every single server.

613
00:43:49,120 --> 00:43:55,030
And I pairs server menu dot list get children.

614
00:43:55,600 --> 00:44:02,830
And what we're going to do is we need to check if this current server get attribute owner.

615
00:44:03,900 --> 00:44:07,770
Is equal to the server that is passed to this function.

616
00:44:07,770 --> 00:44:10,590
So server to update.

617
00:44:11,040 --> 00:44:13,200
Server to update dot.

618
00:44:14,080 --> 00:44:16,540
Owner dot name.

619
00:44:17,300 --> 00:44:25,430
And we're going to set the current server, get that player count text label, set the text equal to

620
00:44:25,430 --> 00:44:36,050
the number of players in server to update dot players in server, concatenate it with a slash and then

621
00:44:36,050 --> 00:44:41,960
concatenate it with server to update dot max size.

622
00:44:41,960 --> 00:44:44,330
And that's all we need to do there as well.

623
00:44:45,070 --> 00:44:47,680
Now, let's say the next action we need to do.

624
00:44:48,540 --> 00:44:55,320
Is we need to enable the teleport on our screen or that teleport menu, which I believe is our last

625
00:44:55,320 --> 00:44:55,980
action.

626
00:44:55,980 --> 00:45:01,020
So if the action is equal to server action enums dot two client dot teleport.

627
00:45:01,900 --> 00:45:05,560
Then we're going to set the visibility of our teleport menu to true.

628
00:45:05,920 --> 00:45:12,400
We're going to use our tween service to create a new tween on our teleport menu dot text label.

629
00:45:13,150 --> 00:45:16,810
We can do a tween info of something just like 0.5 seconds.

630
00:45:17,080 --> 00:45:21,190
And we want to set the text transparency to zero.

631
00:45:21,190 --> 00:45:22,510
So that way it's fully opaque.

632
00:45:22,510 --> 00:45:24,370
And then we can just play this tween.

633
00:45:25,500 --> 00:45:28,380
And we're going to create a tween.

634
00:45:29,160 --> 00:45:31,440
On the teleport menu itself as well.

635
00:45:33,200 --> 00:45:36,290
Again, we'll do a tween info of 0.5 seconds.

636
00:45:37,630 --> 00:45:42,880
And we're going to set the background transparency to be fully opaque.

637
00:45:42,940 --> 00:45:45,340
And we're going to play this tween as well.

638
00:45:47,140 --> 00:45:53,530
Now we're going to do here is we're just going to have a while loop that's just going to update the

639
00:45:53,530 --> 00:45:55,960
text that is inside of the teleport menu.

640
00:45:55,960 --> 00:46:02,560
So we're just going to do something like teleporting and then dot dot dot reset it back and do dot dot

641
00:46:02,560 --> 00:46:03,880
dot and so on.

642
00:46:04,180 --> 00:46:10,810
So while true what we're going to do is we're going to do teleport menu dot text label dot text is equal

643
00:46:10,810 --> 00:46:16,720
to teleport menu dot text label dot text and concatenate it with a period.

644
00:46:16,900 --> 00:46:21,490
Because inside of our teleport menu, our text label already just says teleporting.

645
00:46:22,090 --> 00:46:30,370
We're going to wait for 0.5 seconds and if the teleport menu dot text label dot text.

646
00:46:31,100 --> 00:46:32,810
Is equal to.

647
00:46:32,810 --> 00:46:36,980
We'll just do teleporting dot dot dot.

648
00:46:37,790 --> 00:46:46,490
Then we need to set the teleport menu dot text label dot text back to teleporting.

649
00:46:47,740 --> 00:46:50,830
And then we'll also wait for like 0.5 seconds.

650
00:46:51,250 --> 00:46:56,980
Now, just in case, for some reason, our teleport fails.

651
00:46:57,340 --> 00:47:02,020
Um, we should kick the player out of the server and tell them that they failed to teleport.

652
00:47:02,020 --> 00:47:05,410
Otherwise they're going to have this teleport menu stuck on their screen forever.

653
00:47:05,410 --> 00:47:07,450
So what I'm going to do is I'm going to create a variable.

654
00:47:07,450 --> 00:47:09,310
I'll just call it last tick.

655
00:47:09,310 --> 00:47:10,390
It's equal to tick.

656
00:47:11,050 --> 00:47:17,470
And we're going to do is we're going to check if the current tick subtracted by this last tick is let's

657
00:47:17,470 --> 00:47:18,730
say it's greater than 30.

658
00:47:18,730 --> 00:47:24,160
So let's say we've been sitting here for more than 30s if we have, that means we've been sitting here

659
00:47:24,160 --> 00:47:27,250
for way too long and we're just going to kick ourselves.

660
00:47:27,250 --> 00:47:33,340
So we'll reference the local player, we'll just kick ourselves and give a message like teleport timed

661
00:47:33,340 --> 00:47:34,120
out.

662
00:47:35,060 --> 00:47:37,490
And that kind of just fixes our problem there.

663
00:47:38,230 --> 00:47:42,340
And I'm pretty sure that is all of the actions we need to listen to on the client.

664
00:47:42,340 --> 00:47:44,650
So let's go ahead and verify that real quick.

665
00:47:44,650 --> 00:47:48,970
So if we access our server action enums dot two client.

666
00:47:49,590 --> 00:47:56,160
We have one two, three, four, five, six, seven and we have one two, 34567.

667
00:47:56,160 --> 00:47:56,640
Cool.

668
00:47:56,640 --> 00:47:58,980
We have listened to all of the actions.

669
00:47:58,980 --> 00:48:04,500
The next thing we need to do is we need to set up the functions for all of the different buttons and

670
00:48:04,500 --> 00:48:05,430
our GUI.

671
00:48:05,880 --> 00:48:09,960
And of course, this lecture is already getting a little bit long, so we're going to go ahead and wrap

672
00:48:09,960 --> 00:48:11,820
that up in the next lecture.

673
00:48:12,120 --> 00:48:13,140
See you there.